<template>
  <div>
	 <el-row>
	 	<el-col :span="10" v-for="(item,index) in newsongList" :key="index" class="artist-list-flex">
			<div class="index">
			<span v-show="!(playId=='no-id'&&index == playIndex && item.name == playName)">{{
			  index + 1
			}}</span>
			<i
			  class="iconfont icon-V"
			  v-show="playId=='no-id'&&index == playIndex && item.name == playName"
			></i>
			</div>
	 		<div class="artist-img"   @click="playMusic(index)">
	 			<el-image
	 			      style="width: 50px; height: 50px"
	 			      :src="item.picUrl"
	 			      ></el-image>
					  <i class="iconfont icon-bofang"></i>
	 		</div>
	 		<div class="artist-content">
	 			<div style="font-size: 14px;padding-bottom: 16px;">{{item.name}}</div>
	 			<div style="font-size: 14px;">{{item.song.album.company}}</div>
	 		</div>
	 	</el-col>
	 </el-row>
  </div>
</template>

<script>
	import { _getSongUrl } from "network/detail"
	import { Song } from "player/init-songs";
export default {
  name:'NewSong',
  props:['newsongList'],
  data(){
    return{
      imgCount:1,
	  playIndex: .5,
	  playName: null,
	  playId:null
    }
  },
  mounted() {
         this.$bus.$on('Playing', (index, name,id) => {
             this.playIndex = index;
             this.playName = name;
             this.playId=id;
         })
     },
  computed:{
    isPlay(){
      /**判断是否处于播放状态 */
      return this.playId=='no-id'&&index == playIndex && item.name == playName;
    }
  },
  methods:{
	    newSongImgLoad() {
	      /**类似于防抖函数功能*/
	      if (this.imgCount == this.newsongList.length) this.$emit("newSongImgLoad");
	      this.imgCount++;
	    },
		 playMusic(index) {
		     /**播放列表唯一标识处理，防止一个页面中多个songList播放标时出错
		      * 使用songList时一定要加ref="songList"，歌单详情页面id是歌单ID，这样才能获取到正确的唯一标识
		      */
		    let id=this.$refs.songList&&this.$refs.songList.id||this.id||'no-id';
		     let newsongList;
		     if (this.newsongList.length >= 200) {
		         newsongList = this.newsongList.slice(0, 199);
		     }
		     else newsongList = this.newsongList;
			 
		     let url = null;
		     let playList = [];
		     for (let i = 0, length = newsongList.length; i < length; i++) {
				 const params = {id:newsongList[i].id}
		         _getSongUrl(params).then(res => {
					 
		             url = res.data.data[0].url;
					 console.log(res.data)
		             /**Song 构造函数参数：1.下标、2.歌曲、3.歌曲路径、4.歌曲id */
		             let song = new Song(i, newsongList[i], url, newsongList[i].id,);
		             playList.push(song);
		             if (i == newsongList.length - 1) {
		                 /**全局播放事件
		                  * @playList         处理后的播放列表
		                  * @index            音乐列表中音乐开始播放的位置
		                  * @newsongList        歌曲列白，用于播放器中歌单展示
		                  * @id               唯一标识，用于显示当前播放歌曲的列表
		                  */
			
		                 this.$bus.$emit("playMusic", playList, index,newsongList,id);
		             }
		         });
		     }
		 },
	 
  }
}
</script>

<style lang="less" scoped>
   .artist-list{
   	width: 100%;
   }
   .artist-list-flex{
   	display: flex;
	align-items: center;
	.index{
		display: inline-block;
		width: 16px;
	}
	.artist-img{
		position: relative;
		padding: 10px 10px;
		i{
			position: absolute;
			left: calc(50% - 9px);
			top: calc(50% - 9px);
			font-size: 18px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
	}
   }
</style>
